<template>
  <section class="article-video">
    <h2 class="mb-1 side-title font-mg side-title-icon font-normal">
      <slot>{{ title }}</slot>
    </h2>
    <ul class="video-list">
      <li v-for="item in video.list" :key="item.id">
        <router-link
          class="video-item flex justify-between"
          :to="'/video?id=' + item.id"
        >
          <section class="video-box">
            <img :src="item.cover_url" alt="" />
          </section>
          <section class="video-person">
            <p class="video-person-title font-m text-more-ellipsis">
              {{ item.title }}
            </p>
            <p class="video-play-number font">
              <span v-if="item.hits">{{ item.hits }}次播放</span>
              <span v-else>暂无播放</span>
            </p>
          </section>
        </router-link>
      </li>
    </ul>
    <section class="news-aside-more flex-center">
      <buttonVue width="173" height="34" :path="`/project/list?code=classify_2d4c88a`">MORE</buttonVue>
    </section>
  </section>
</template>

<script setup lang="ts">
import buttonVue from "@/components/More.vue";

import { getVideo } from "@/api";
import { reactive, onMounted } from "vue";

const props = defineProps({
  title: {
    type: String as any,
    default: "" as any,
  },
});

const video = reactive({
  list: [] as any,
});
onMounted(() => {
  getVideo().then((res: any) => {
    const data = res;
    video.list = data;
  });
});
</script>

<style scoped>
@import "@/assets/css/newsAside.css";
.article-video .side-title {
  padding-left:41px;
  color: #000;
}
.video-item {
  margin-bottom: 45px;
  cursor: pointer;
}
.video-box {
  margin-right: 10px;
  width: 135px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
}
.video-box:hover {
  box-shadow: 0px 9px 22px 2px rgba(98, 102, 117, 0.35);
}
.video-box img {
  /* display: block; */
  object-fit:cover;
  width: 100%;
  height: 100%;
  object-fit:cover;
}
.video-person {
  width: 252px;
  color: #626675;
}
.video-person-title {
  margin-bottom: 25px;
  height: 58px;
  line-height: 29px;
}
/* .video-person-title:hover{
  color:#ce2021;
} */
</style>
